<template>
    <div class="Header">
        <div class="Header-tool">
            {{dayjs(new Date()).format("HH:mm")}}
            <div class="Header-tool-icon">
                <img src="https://img01.yzcdn.cn/upload_files/2021/08/26/FpfuSKwUL6dwuVFu8bTJtXNyFJFc.png" />
                <img src="https://img01.yzcdn.cn/upload_files/2021/08/26/Fp2VBx2V2U6iDWyoqsNe0MTXym7Z.png" />
                <img src="https://img01.yzcdn.cn/upload_files/2021/08/26/FggIMQbJb4OxvAhxePe_QkmVQj2j.png" />
            </div>
        </div>
        <div class="Header-title">
            <div>页面标题</div>
            <div class="right">
            <div class="menu" />
            <div class="split-line" />
            <div class="dot" />
            </div>
        </div>
    </div>
</template>

<script setup>
import dayjs from 'dayjs';
</script>

<style lang="less" scoped>
.Header{
  padding: 12px 20px 12px 20px;
  background: #fff;
  &-tool{
    display: flex;
    justify-content: space-between;
    &-icon{
        img {
            height: 12px;
            margin-left: 5px;
        }
    }
  }
  &-title{
    display: flex;
    margin-top: 12px;
    justify-content: center;
    position: relative;
    font-size: 17px;
    
    .right {
        position: absolute;
        right: 0;
        width: 88px;
        height: 32px;
        border-radius: 16px;
        border: 1px solid #e5e5e5;
        display: flex;
        background: hsla(0, 0%, 100%, .6);
        border-color: rgba(0, 0, 0, .08);
        align-items: center;
        cursor: pointer;
    }

    .menu {
        width: 44px;
        height: 6px;
        background-image: url(https://img01.yzcdn.cn/upload_files/2021/08/26/Fj5rIVLaM_1p9KprYbufsuP_QFlj.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50%;
    }

    .split-line {
        width: 0.5px;
        height: 20px;
        background: rgba(0, 0, 0, .1)
    }

    .dot {
        width: 43.5px;
        height: 18px;
        background-image: url(https://img01.yzcdn.cn/upload_files/2021/09/01/FudDjCX-MZQQqhePxe7isHmpYlAv.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50%;
    }
  }
}
</style>